<template>
	<div class="ffffff mainpadding radius" style="width: 75%;">
		<!-- 头像 -->
		<div class="flex">
			<div class="text_d color_zero margin_leftr margin_right3 white_nowrap">头像：</div>
			<div class="flex" v-if="!ossFileUploads.length">
				<img class="imgBox margin_right2" :src="avatar" alt="" @click="dialogImageUrl=avatar,dialogVisible=true">
				<el-form label-width="0px">
					<el-form-item>
						<el-upload :headers="{
					'Token':tokens
				}" class="avatar-uploader" :limit="1" action="http://kaoshi.kongzhongwangluo.top/api/common/upload"
							:show-file-list="false" multiple :on-success="handleAvatarSuccess"
							:before-upload="beforeAvatarUpload" :on-exceed="handleExceed">
							<el-button size="small" type="primary">修改头像</el-button>
						</el-upload>
						<font class="upload-text">只能上传jpg/png文件，且不超过10MB，最多可以上传1张图片</font>
					</el-form-item>
				</el-form>
				<!-- <div class="editUserImg margin_top1">修改头像</div> -->
			</div>
			<el-form label-width="0px" style="display: flex;" v-else>
				<el-form-item>
					<ul class="flexleft">
						<li v-for="(item,index) in ossFileUploads" :key="index" style="position: relative;"
							class="imgBox margin_right1 pointer">
							<img :src="item.filePath.fullurl" class="imgBox"
								@click.stop="dialogVisible=true;dialogImageUrl=item.filePath.fullurl;">
							<!-- <i style="color: #3478f5;position: absolute;top: 5px;right: 5px;font-size: 16px;"
								class="el-icon-circle-close " @click.stop="handlerDel(item, index)"></i> -->
						</li>
					</ul>
				</el-form-item>
				<el-form-item>
					<el-upload :headers="{
				'Token':tokens
			}" class="avatar-uploader" :limit="1" action="http://kaoshi.kongzhongwangluo.top/api/common/upload"
						:show-file-list="false" multiple :on-success="handleAvatarSuccess"
						:before-upload="beforeAvatarUpload" :on-exceed="handleExceed">
						<el-button size="small" type="primary">修改头像</el-button>
					</el-upload>
					<font class="upload-text">只能上传jpg/png文件，且不超过10MB，最多可以上传1张图片</font>
				</el-form-item>
			</el-form>
		</div>
		<!-- 昵称 -->
		<div class="flexleft margin_top2">
			<div class="text_d color_zero margin_leftr margin_right3 white_nowrap">昵称：</div>
			<el-input v-model="nickname" placeholder="请输入昵称"></el-input>
		</div>
		<!-- 性别 -->
		<div class="flexleft margin_top2">
			<div class="text_d color_zero margin_leftr margin_right3 white_nowrap">性别：</div>
			<el-radio-group v-model="gender" text-color="#3478F5">
				<el-radio :label="1">男</el-radio>
				<el-radio :label="2">女</el-radio>
			</el-radio-group>
		</div>
		<!-- 出生年月 -->
		<div class="flexleft margin_top2">
			<div class="text_d color_zero margin_right3 white_nowrap">出生年月：</div>
			<el-date-picker v-model="birthday" type="date" placeholder="请选择出生年月">
			</el-date-picker>
		</div>
		<!-- 地区 -->
		<div class="flexleft margin_top2">
			<div class="text_d color_zero margin_leftr margin_right3 white_nowrap">地区：</div>
			<el-cascader v-model="value2" placeholder="请选择地区" :props="{ label: 'name', value: 'id' }"
				:options="areaList" @change="handleChange"></el-cascader>
		</div>
		<div class="submitBtn pointer" @click="submit">保存修改</div>
		<el-dialog :visible.sync="dialogVisible">
			<img width="100%" :src="dialogImageUrl" alt="">
		</el-dialog>
	</div>
</template>

<script>
	import { getUserInfo, profileUser } from "@/API/mine"
	export default {
		data() {
			return {
				dialogVisible:false,
				dialogImageUrl:"",
				name: "",
				value2: [],
				areaList: [],

				avatar: "",//头像
				nickname: "",//昵称
				gender: 1,//性别：0=保密,1=男,2=女
				birthday: "",//生日
				region: "",//省/市
				province: "",//省
				city: "",//市
				ossFileUploads: [], //图片

			}
		},
		async created() {
			this.tokens = localStorage.getItem("token")
			let res = await this.getAreaList()
			this.areaList = res.areaList
			let data = await getUserInfo()
			this.avatar = data.data.data.avatar
			// this.ossFileUploads.push(data.data.data.avatar)
			this.nickname = data.data.data.nickname
			this.birthday = data.data.data.birthday
			this.gender = data.data.data.gender
			this.value2 = [data.data.data.province, data.data.data.city]
			this.region = data.data.data.region
		},
		methods: {
			handleChange(e) {
				console.log(e);
				this.province = e[0]
				this.city = e[1]
			},
			// 上传图片
			beforeAvatarUpload(file) {
				const isJPG = file.type === 'image/jpeg' || file.type === "image/png";
				const isLt2M = file.size / 1024 / 1024 < 10;
				if (!isJPG) {
					this.$message.error('上传头像图片只能是jpg或者png格式!');
				}
				if (!isLt2M) {
					this.$message.error('上传头像图片大小不能超过 2MB!');
				}
				return isJPG && isLt2M;
			},
			handleAvatarSuccess(res, file) {
				if (res.code !== 1) {
					this.$message.error(res.msg);
					return false;
				}
				// 图片上传成功，添加到图片数组中，进行渲染
				this.ossFileUploads.push({
					filePath: res.data,
					type: "blood",
					dataId: file.uid
				})
				this.$message.success('上传成功')
			},
			handleExceed(files, fileList) {
				this.$message.warning(`当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
			},
			// 删除图片
			handlerDel(item, index) {
				this.ossFileUploads.splice(index, 1)
				this.$message.success('删除成功')
			},
			async submit() { //修改
				if (!this.nickname) {
					this.message("请输入昵称")
					return false
				}
				if (!this.birthday) {
					this.message("请选择出生年月")
					return false
				}
				this.areaList.forEach(item => {
					if (this.province == item.id) {
						this.region = item.name
					}
					item.children.forEach(value => {
						if (this.city == value.id) {
							this.region = `${this.region}/${value.name}`
						}
					})
				})
				this.areaList.forEach(item => {
					if (this.province == item.id) {
						this.region = item.name
					}
					item.children.forEach(value => {
						if (this.city == value.id) {
							this.region = `${this.region}/${value.name}`
						}
					})
				})
				let arr = []
				this.ossFileUploads.forEach(item => {
					arr.push(item.filePath.fullurl)
				})
				console.log(this.ossFileUploads)
				let res = await profileUser({
					avatar: arr.join(),//头像
					nickname: this.nickname,//昵称
					gender: this.gender,//性别：0=保密,1=男,2=女
					birthday: this.birthday,//生日
					region: this.region,//省/市
					province: this.province,//省
					city: this.city,//市
				})
				if (res.data.code == 1) {
					this.$bus.$emit("changePerson")
					this.toast(res.data.msg)
				} else {
					this.toast(res.data.msg, "warning")
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.imgBox {
		width: 88px;
		height: 88px;
	}

	.editUserImg {
		height: 30px;
		line-height: 20px;
		padding: 5px 10px;
		border: 1px solid rgba(52, 120, 245, 1);
		background: rgba(52, 120, 245, 0.1);
		border-radius: 4px;
		font-size: 14px;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #3478F5;
	}

	.margin_leftr {
		margin-left: 27px;
	}

	::v-deep .el-input {
		width: 420px;
		border-radius: 7px 7px 7px 7px;
	}

	.submitBtn {
		width: 135px;
		/* // height: 47px; */
		padding: 15px 35px;
		background-color: #3478F5;
		font-size: 16px;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
		margin-top: 50px;
		margin-left: 100px;
	}
</style>